<template>
  <div>

    <el-table :data="TableData.data">
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="nickname" label="nickname"></el-table-column>
      <el-table-column prop="role" label="role"></el-table-column>
      <el-table-column prop="rolename" label="rolename"></el-table-column>
      <el-table-column prop="username" label="username"></el-table-column>
      <el-table-column prop="avator" label="avator">
        <template #default="scope">
          <img :src="scope.row.avator" height="40" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" @click="handDel(scope.row.id)">姜任帅是傻逼一</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-footer>
      <el-pagination @change="GetList" :page-size="1" :pager-count="10" layout="prev, pager, next" :total="10" />
    </el-footer>
  </div>
</template>
<script setup lang="ts">
import axios from 'axios'
import { reactive } from 'vue'
const TableData = reactive({
  data: [],
  total: 0
})

const GetList = async () => {
  const res = await axios.get('/api/users')
  console.log(res.data)
  const { data, total } = res.data.data
  TableData.data = data
  TableData.total = total
}
GetList()
const handDel = async (id: string) => {
  const res = await axios.delete('/api/user?id=' + id)
  console.log(res)
  alert('删除成功')
  await GetList()
}
// 编辑
const handEdit = () => {

  console.log('编辑')
}
</script>